<template>
  <div class="box">
    <van-nav-bar title="支付订单"></van-nav-bar>
    <div class="paySucceed_box">
      <img src="@/assets/images/paySucceed.png" alt="">
      <p>支付成功</p>
      <p>{{'￥' + pro_price}}</p>
      <button class="paySucceed_btn" @click="payAchieve">完成</button>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { NavBar } from 'vant'
Vue.use(NavBar)
export default {
  data () {
    return {
      pro_price: '2333'
    }
  },
  computed: {},
  mounted () {
    this.pro_price = this.$route.query.sum
  },
  methods: {
    payAchieve () {
      this.$router.replace('/home')
    }
  }
}
</script>

<style lang="scss" scoped>
.paySucceed_box {
  width: 100%;
  height: auto;
  img {
    margin: 0.9rem 1.35rem 0.3rem 1.35rem;
    width: 1.04rem;
    height: 1.04rem;
  }
  p:nth-of-type(1) {
    width: 100%;
    height: 0.16rem;
    line-height: 0.16rem;
    font-size: 0.14rem;
    color: #464646;
    text-align: center;
    margin-bottom: 0.22rem;
  }
  p:nth-of-type(2) {
    width: 100%;
    line-height: 0.3rem;
    font-size: 0.3rem;
    color: #FF5959;
    text-align: center;
  }
  .paySucceed_btn {
    position: fixed;
    bottom: 2.2rem;
    margin: 0 0.34rem;
    width: 3.06rem;
    height: 0.4rem;
    background: linear-gradient(0deg,rgba(234,180,254,1),rgba(253,139,217,1));
    box-shadow: 0 0.03rem 0.03rem 0 rgba(234,180,254,0.4);
    border-radius: 0.2rem;
    border: none;
    text-align: center;
    color: #FFFFFF;
    font-size: 0.16rem;
    line-height: 0.4rem;
  }
}
/deep/ .van-nav-bar__title {
  font-size: 0.18rem;
  color: #171717;
  font-weight: bold;
}
</style>
